<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-select
        v-model="listQuery.display"
        clearable
        filterable
        placeholder="是否推荐"
      >
        <el-option label="是" :value="true" />
        <el-option label="否" :value="false" />
      </el-select>
      <el-input v-model="listQuery.topicName" placeholder="请输入动态话题" autocomplete="off"></el-input>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
      <div style="float: right;">
        <el-button
          class="filter-item"
          size="small"
          type="primary"
          @click="updateTopic({})"
        >
          添加话题
        </el-button>
      </div>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="序号" prop="sortValue" align="center"> </el-table-column>
        <el-table-column label="话题" align="center" prop="topicName"> </el-table-column>
        <el-table-column label="简介" align="center" prop="des"> </el-table-column>
        <el-table-column label="是否推荐" align="center">
          <template slot-scope="{row}">{{ row.display? '是' : '否' }}</template>
        </el-table-column>
        <el-table-column label="配置时间" align="center" prop="createAt"> </el-table-column>
        <el-table-column label="修改时间" align="center" prop="updateAt"> </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="230"
          class-name="small-padding"
        >
          <template slot-scope="{ row }">
            <el-button type="primary" @click="updateTopic(row)"> 修改 </el-button>
            <el-button type="danger" @click="deleteTopic(row)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form :model="fromData">
        <el-form-item label="话题名" :label-width="'100px'">
          <el-input v-model="fromData.circleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否推荐" :label-width="'100px'">
          <el-switch v-model="fromData.display" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
        </el-form-item>
        <el-form-item label="简介" :label-width="'100px'">
          <el-input v-model="fromData.des" type="textarea" :rows="3" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="'100px'">
          <el-input-number v-model="fromData.sortValue" label="排序"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="_updateTopic">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination' // secondary package based on el-pagination
import {
  getDynamicGetTopicList, getDynamicUpdateTopic
} from '@/api/anchor'

export default {
  name: 'AppTopic',
  components: { TablePagination },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        display: null,
        topicName: null,
        limit: 20
      },
      dialogTitle: '',
      fromData: {},
      dialogFormVisible: false
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      this.listLoading = true
      getDynamicGetTopicList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    deleteTopic(row) {
      console.log(row)
      this.$confirm(`是否删除该话题?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          getDynamicUpdateTopic({
            id: row.topicId,
            delete: true,
            circleName: row.topicName,
            des: row.des,
            sortValue: row.sortValue,
            display: row.display
          }).then(resp => {
            this.$message.success('删除成功')
            this.doSearch()
          }).catch((err) => {
            console.log(err)
            this.$message.error(err)
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    updateTopic(row) {
      if (row.topicId) {
        this.dialogTitle = '编辑话题'
        this.fromData = {
          id: row.topicId,
          delete: false,
          circleName: row.topicName,
          des: row.des,
          sortValue: row.sortValue,
          display: row.display
        }
      } else {
        this.dialogTitle = '新增话题'
        this.fromData = {
          id: null,
          delete: false,
          circleName: null,
          des: null,
          sortValue: null,
          display: null
        }
      }
      this.dialogFormVisible = true
    },
    _updateTopic() {
      console.log(this.fromData)
      getDynamicUpdateTopic(this.fromData).then(resp => {
        this.$message.success('提交成功')
        this.dialogFormVisible = false
        this.doSearch()
      }).catch((err) => {
        console.log(err)
        this.$message.error(err)
      })
    }
  }
}
</script>
